<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--制作的图标，使用href关联，仅仅需要更改href的内容  -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/pagination.css">
    <script src="./js/pagination.js"></script>
    <script src="./js/jquery/jquery.js"></script>
    <script src="./js/bootstarp/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="data clearfix">
        <div class="row pull-left">
            广告名称&nbsp;<input type="text" id="keyword" name="keyword">
            状态&nbsp;<select>
            <option selected="selected" id="sear">全部</option>
            <option>未上架</option>
            <option>已上架</option>
            <option>已下架</option>
        </select>
        </div>
        <button class="pull-right btn btn-sm btn-default" id="productBtn" onclick="window.location.href='productList.html'">商品列表</button>
        <button class="pull-right btn btn-sm btn-default" id="insertBtn" onclick="window.location.href='./src/js/index.html'">新建广告</button>
        <button class="pull-right btn btn-sm btn-default" id="selectBtn" onclick="search()">查询</button>
    </div>
    <table class="table table-striped table-bordered table-condensed" id="content">
        <tr align="center">
            <th style="text-align: center">ID</th>
            <th style="text-align: center">状态</th>
            <th style="text-align: center">广告名称</th>
            <th style="text-align: center">关联项目</th>
            <th style="text-align: center">开始时间</th>
            <th style="text-align: center">结束时间</th>
            <th style="text-align: center">访问人数</th>
            <th style="text-align: center">创建时间</th>
            <th style="text-align: center">操作</th>
        </tr>
    </table>
    <div id="pages"></div>
</div>
</body>
</html>
<script>
    //时间格式化函数
    function timeFormat(data) {
        let date = new Date(data)
        let Y = date.getFullYear() + '-'
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
        let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
        let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
        let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
        return Y + M + D + h + m + s
    }
    //入口函数
    $(function () {
        //分页
        initData(1, 5);
        //搜索
        //search();
    })
    //按照胡总的改的
/*    function search() {
        $("#selectBtn").click(function (){
            if ($("#keyword").val()==""){

            }else {
                initData(1);
            }
        })
    }*/
    function search() {
        url = "http://localhost:8080/ad/fuzzy";
        let searchValue = $("#keyword").val();
        $(function () {
            data ={
                name: name,
                status:status
            }
            $.post(url,data,function (result) {
                userDate = result.userDate;
                let size = result.size;
                currentpage = 0;//当前页
                Total = size % 9 === 0 ? size / 9 : Math.ceil(size / 9);//计算页数;Math.ceil()向上取整
                //控制数据行数
                initData(userDate, currentpage);
            })
        })
    }
    function initData(page, size) {
        let data = {
            page: page,
            size: size,
        }

        $.get("http://127.0.0.1:8080/ad/list", data, function (result) {
            if (result.status === 200) {
                let page = result.data;
                if (page.data.length > 0) {
                    for (let i = 0; i < page.data.length; i++) {
                        let datum = result.data.data[i];
                        $("#content")
                            .append(
                                $("<tr>")
                                    .append(
                                        $("<td>").text(datum.id).addClass("text-center")
                                    )
                                    .append(
                                        $("<td>").text(datum.status).addClass("text-center")
                                    )
                                    .append(
                                        $("<td>").text(datum.name).addClass("text-center")
                                    )
                                    .append(
                                        $("<td>").text(datum.associateditems).addClass("text-center")
                                    )
                                    .append(
                                        $("<td>").text(timeFormat(datum.starttime)).addClass("text-center")
                                    )
                                    .append(
                                        $("<td>").text(timeFormat(datum.endtime)).addClass("text-center")
                                    )
                                    .append(
                                        $("<td>").text(datum.visitors).addClass("text-center")
                                    )
                                    .append(
                                        $("<td>").text(timeFormat(datum.createtime)).addClass("text-center")
                                    )
                                    .append(
                                        $("<td>")
                                            .append($("<button class='btn btn-info edit'>编辑</button>").click(function () {
                                            //跳到编辑页面（改）
                                            window.location.href = "adupdate.html?id=" + datum.id
                                        })
                                            ).append($("<button class='btn btn-info'>删除</button>").click(function () {
                                            //注意：这里的this是指当前的按钮对象即删除，删除要删除它的父类tr
                                            //发送post请求(ajax请求) 删除数据
                                            let data={
                                                id:datum.id
                                            }
                                            $.post("http://127.0.0.1:8080/ad/del",data,function () {
                                                if (result==200){
                                                    $(this).parent("tr").remove()
                                                    window.location.href="admsg.html"
                                                }
                                            })
                                        })
                                        )
                                    )
                            )

                    }
                } else {
                    $("#content")
                        .before($("<p>暂无数据</p>"))
                        .hide();
                }

                new Pagination({
                    element: '#pages',  // 渲染的容器  [必填]
                    total:page.total,
                    layout: 'total, sizes, home, prev, pager, next, last, jumper',  // [必填]
                    pageSize: page.size, // 每页显示条数   TODO: 默认选中sizes [必填]
                    type: 2,  // 样式类型，默认1 ，目前可选 [1,2] 可自行增加样式   [非必填]
                    pageCount: 9, // 页码显示数量，页码必须大于等于5的奇数，默认页码9
                    prevText: '上一页', // 上一页文字，不传默认为箭头图标  [非必填]
                    nextText: '下一页', // 下一页文字，不传默认为箭头图标 [非必填]
                    ellipsis: true, // 页码显示省略符 默认false  [非必填]
                    currentChange: function (index, pageSize) {
                        btn(index, pageSize);
                    }
                });

                function btn(page, size) {
                    $("#content td").remove()
                    let data = {
                        page: page,
                        size: size,
                    }
                    $.get("http://127.0.0.1:8080/ad/list", data, function (result) {
                        if (result.status === 200) {
                            let page = result.data;
                            if (page.data.length > 0) {
                                for (let i = 0; i < page.data.length; i++) {
                                    let datum = result.data.data[i];
                                    $("#content")
                                        .append(
                                            $("<tr>")
                                                .append(
                                                    $("<td>").text(datum.id).addClass("text-center")
                                                )
                                                .append(
                                                    $("<td>").text(datum.status).addClass("text-center")
                                                )
                                                .append(
                                                    $("<td>").text(datum.name).addClass("text-center")
                                                )
                                                .append(
                                                    $("<td>").text(datum.associateditems).addClass("text-center")
                                                )
                                                .append(
                                                    $("<td>").text(timeFormat(datum.starttime)).addClass("text-center")
                                                )
                                                .append(
                                                    $("<td>").text(timeFormat(datum.starttime)).addClass("text-center")
                                                )
                                                .append(
                                                    $("<td>").text(datum.visitors).addClass("text-center")
                                                )
                                                .append($("<td>").text(timeFormat(datum.createtime)).addClass("text-center"))
                                                //添加操作
                                                .append(
                                                    $("<td>")
                                                        .append($("<button class='btn btn-info edit'>编辑</button>").click(function () {
                                                        window.location.href = "adupdate.html?id=" + datum.id
                                                    })).append($("<button class='btn btn-info'>删除</button>").click(function () {
                                                        //注意：这里的this是指当前的按钮对象即删除，删除要删除它的父类tr
                                                        //发送post请求(ajax请求) 删除数据
                                                        let data={
                                                            id:datum.id
                                                        }
                                                        $.post("http://127.0.0.1:8080/ad/del",data,function (result) {
                                                           window.location.href="admsg.html"
                                                        })
                                                    })
                                                )
                                                )
                                        )

                                }
                            }
                        }
                    })
                }
            } else {
                $("#content")
                    .before($("<p>status不等于200</p>"))
                    .hide();
            }
        })
    }

</script>